<template>
	<view>
		<view class="box-bg">
			<uni-nav-bar left-icon="left" :title="title" @clickLeft="back">
				<block v-slot:right><button type="primary" plain="true" size="mini" @click="submit">提交</button></block>
			</uni-nav-bar>
		</view>
		<view>
			<view class="image-border" v-if="noImg"></view>
			<view v-else><image class="image" mode="heightFix" :src="imgPaths[0]" @click="preview"></image></view>
		</view>

		<view class="custom-button">
			<button type="primary" plain="true" size="mini" @click="img">选择图片</button>
			<button type="primary" plain="true" size="mini" @click="info">获取图片</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			uid: 1,
			imgPaths: [],
			noImg: true
		};
	},
	onLoad: function(option) {
		this.activityId = option.activityId;
		this.activityName = option.activityName;
		this.uid = option.uid;
		this.title = this.activityName;
	},
	methods: {
		submit() {
			if (this.imgPaths.length > 0) {
				uni.uploadFile({
					url: 'http://localhost:8080/sign/setsign',
					filePath: this.imgPaths[0],
					name: 'proof',
					// header: {
					// 	'content-type': 'multipart/form-data'
					// },
					formData: {
						activityId: this.activityId,
						uid: this.uid
					},
					success: uploadFileRes => {
						console.log(uploadFileRes.data);
						if (uploadFileRes.statusCode == 200) {
							uni.showToast({
								icon: 'success',
								title: '签到提交成功！'
							});
							this.imgPaths[0] = uploadFileRes.data;
						}
						if (uploadFileRes.statusCode == 400) {
							uni.showToast({
								icon: 'error',
								title: JSON.parse(uploadFileRes.data).message
							});
						}
					},
					fail: err => {
						console.log(err);
					}
				});
			} else {
				uni.showToast({
					icon: 'error',
					title: '提交之前请先选择图片！'
				});
			}
		},
		preview() {
			uni.previewImage({
				urls: this.imgPaths
			});
		},
		back() {
			uni.navigateBack({
				delta: 1
			});
		},
		img() {
			uni.chooseImage({
				count: 1,
				sizeType: 'original',
				sourceType: ['album'], //从相册选择
				success: res => {
					console.log(JSON.stringify(res.tempFilePaths));
					this.imgPaths = res.tempFilePaths;
					this.noImg = false;
					uni.previewImage({
						urls: res.tempFilePaths
					});
				}
			});
		},
		info() {
			uni.getImageInfo({
				src: 'http://localhost:8080/static/image/abc.png',
				success: function(res) {
					console.log(res);
				}
			});
		}
	}
};
</script>

<style>
/* 修改buttom默认样式 */
button {
	font-size: 18rpx;
}

.custom-button {
	margin-top: 100rpx;
	text-align: center;
}

.image-border {
	margin-top: 200rpx;
	margin-left: 100rpx;
	margin-right: 100rpx;
	box-sizing: border-box;
	border: 2rpx dashed #666666;
	height: 440rpx;
}

.image {
	display: block;
	margin: 200rpx auto;
	height: 440rpx;
}

.box-bg {
	background-color: #f5f5f5;
	padding: 5px 0;
}
</style>
